//获取canvas上下文
const ctx = document.getElementById('canvas').getContext('2d');
//创建一个径向渐变
/* 
  参数:
    参数1:渐变起始圆的圆心x坐标,参数2:渐变起始圆的圆心y坐标,参数3:渐变起始圆的半径
    参数4:渐变结束圆的圆心x坐标,参数5:渐变结束圆的圆心y坐标,参数6:渐变结束圆的半径
*/
const radialGradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);
// 设置渐变颜色
// addColorStop(position, color)
// position: 渐变的位置（0.0 到 1.0 之间）
// color: 渐变的颜色
radialGradient.addColorStop(0, 'red'); // 在位置 0 (即渐变起始点) 设置为红色
radialGradient.addColorStop(1, 'blue'); // 在位置 1 (即渐变结束点) 设置为蓝色

// 设置填充样式为创建的径向渐变
ctx.fillStyle = radialGradient;

// 绘制一个矩形，使用设置的渐变填充
ctx.fillRect(0, 0, 200, 200); // 从 (0, 0) 开始，宽 200 像素，高 200 像素

/* 
视觉效果
  靠近起始圆中心的区域会更接近红色。
  随着远离起始圆而靠近结束圆，颜色会逐渐变得更蓝。
  超出结束圆的部分则会完全变为蓝色。
*/

//绘制两个圆起辅助观察作用
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI * 2, false);
ctx.stroke();
